<template>
  <c-back-wrap :loading="loading" go-page="经销商合作终止管理" current-page="详情">
    <c-title title="经销商-客户基本信息">
      <QupList :column="3" sep="：" default-value="" label-position="right" label-width="140">
        <QupListItem label="所属办事处" :value="detail.officeName" />
        <QupListItem label="办事处类型" :value="detail.officeTypeName" dict-type-code="PURCHASE_CHANNEL" :prop-enum="{domainCode:'marketing',appCode:'slm'}" />
        <QupListItem label="办事处负责人" :value="detail.personName" />
        <!-- <QupListItem label="客户经理" :value="detail.accountManagerName" />
        <QupListItem label="客户经理类型" :value="detail.accountManagerTypeName" dict-type-code="PURCHASE_CHANNEL" :prop-enum="{domainCode:'marketing',appCode:'slm'}" />
        <QupListItem label="客户经理电话" :value="detail.accountManagerTel" /> -->
        <QupListItem label="客户编码" :value="detail.customerCode" />
        <QupListItem label="客户名称" :value="detail.customerName" />
        <QupListItem label="客户经营类型" :value="detail.businessTypeName" dict-type-code="PURCHASE_CHANNEL" :prop-enum="{domainCode:'marketing',appCode:'slm'}" />
        <QupListItem label="经销商联系电话" :value="detail.contactPhone" />
        <QupListItem label="是否有电商配送权限" :value="detail.isElecBusiniess" dict-type-code="BOOLEANS" :prop-enum="{domainCode:'marketing',appCode:'slm'}" />
        <QupListItem label="客户经营总面积" :value="`${detail.operateArea || 0}㎡`" />
        <QupListItem label="城市级别" :value="detail.cityLevelName" dict-type-code="CITY_LEVEL" :prop-enum="{domainCode:'marketing',appCode:'slm'}" />
        <QupListItem label="合作开始日期" :value="$trimHMS(detail.cooperateStart)" />
        <QupListItem label="是否需要其他业务客户经理接收知晓" :value="detail.isOtherReceiveManagerKnow" dict-type-code="BOOLEANS" :prop-enum="{domainCode:'marketing',appCode:'slm'}" label-width="220px" />
        <template v-if="[1,'1'].includes(detail.isOtherReceiveManagerKnow)">
          <QupListItem label="接收客户经理" :value="detail.receiveManagerCode" />
          <QupListItem label="接收客户经理名称" :value="detail.receiveManagerName" />
          <QupListItem label="数据接收客户经理类型" :value="detail.receiveManagerTypeName" />
          <QupListItem label="接收客户经理电话" :value="detail.receiveManagerTel" />
        </template>
      </QupList>
    </c-title>
    <c-title title="经销商-合作终止信息">
      <QupList sep="：" :column="3">
        <QupListItem label="合作终止原因" :value="cooperationEndDTO.reason" :span="24" />
        <QupListItem label="合作终止类型" :value="cooperationEndDTO.type" dict-type-code="CTM_COOPERATE_END_TYPE" :prop-enum="{domainCode:'marketing',appCode:'slm'}" />
        <QupListItem label="是否转让销量" :value="cooperationEndDTO.isTransferSales" dict-type-code="BOOLEANS" :prop-enum="{domainCode:'marketing',appCode:'slm'}" />
        <QupListItem label="未完成配送订单处理方式" :value="cooperationEndDTO.distributionType" dict-type-code="CTM_TOBE_DISTRIBUTION_ORDER_PROCESS_TYPE" :prop-enum="{domainCode:'marketing',appCode:'slm'}" />
        <QupListItem label="装修返利是否到期" :value="cooperationEndDTO.isRebateMaturity" dict-type-code="BOOLEANS" :prop-enum="{domainCode:'marketing',appCode:'slm'}" />
        <QupListItem label="是否有未交订货" :value="cooperationEndDTO.isUnfulfilledOrder" dict-type-code="BOOLEANS" :prop-enum="{domainCode:'marketing',appCode:'slm'}" />
        <QupListItem label="未交订货数量是否已提交" :value="cooperationEndDTO.isUnfulfilledOrderSubmit" dict-type-code="BOOLEANS" :prop-enum="{domainCode:'marketing',appCode:'slm'}" />
        <QupListItem label="是否已开发新商家" :value="cooperationEndDTO.isDevelopNewCustomer" dict-type-code="BOOLEANS" :prop-enum="{domainCode:'marketing',appCode:'slm'}" />
        <template v-if="[1,'1'].includes(cooperationEndDTO.isDevelopNewCustomer)">
          <QupListItem label="新商家概况描述" :value="cooperationEndDTO.newCustomerDescribe" :span="24" />
          <QupListItem label="备注" :value="cooperationEndDTO.remark" :span="24" />
        </template>
      </QupList>
    </c-title>
    <c-title title="经销商-门店信息">
      <ShopTable :table-data="shopBusinessDTOS" :is-edit="false" />
    </c-title>
    <c-title title="经销商-业务账号及送达方信息">
      <AccountAndSenderInfo :table-data="accountToDTOS" />
    </c-title>
    <c-title title="经销商-门店建设信息">
      <ShopConstructionInfo :table-data="shopConstructDTOS" type="view" />
    </c-title>
    <c-title title="经销商-关联分销商信息">
      <QupList sep="：" :column="3">
        <QupListItem label="分销客户编码" :value="decorateEnterpriseDTO.code" />
        <QupListItem label="分销客户名称" :value="decorateEnterpriseDTO.name" />
        <QupListItem label="分销客户业务类型" :value="decorateEnterpriseDTO.businessTypeName" />
        <QupListItem label="城市级别" :value="decorateEnterpriseDTO.cityLevelName" />
        <QupListItem label="经营面积" :value="decorateEnterpriseDTO.operateArea" />
        <QupListItem label="加盟时间" :value="decorateEnterpriseDTO.cooperateStart" :span="24" />
        <QupListItem label="是否转让销量" :value="decorateEnterpriseDTO.isTransferSales" dict-type-code="BOOLEANS" :prop-enum="{domainCode:'marketing',appCode:'slm'}" />
        <QupListItem label="装修返利是否到期" :value="decorateEnterpriseDTO.isRebateMaturity" dict-type-code="BOOLEANS" :prop-enum="{domainCode:'marketing',appCode:'slm'}" />
        <QupListItem label="是否有未交订货" :value="decorateEnterpriseDTO.isUnfulfilledOrder" dict-type-code="BOOLEANS" :prop-enum="{domainCode:'marketing',appCode:'slm'}" />
        <QupListItem label="未交订货数量是否已提交" :value="decorateEnterpriseDTO.isUnfulfilledOrderSubmit" dict-type-code="BOOLEANS" :prop-enum="{domainCode:'marketing',appCode:'slm'}" />
      </QupList>
    </c-title>
    <c-title title="附件信息">
      <QupList sep="：" :column="3" label-width="170px">
        <QupListItem v-if="cooperationEndDTO.type === 'A'" label="最近一次整改通知书" :span="24">
          <c-file-list :uploadable="false" :editable="false" :model-id="id" view-type="list" type-code="ACCESS072" />
        </QupListItem>
        <template v-if="cooperationEndDTO.type === 'B'">
          <QupListItem label="自愿放弃说明书" :span="24">
            <c-file-list :uploadable="false" :editable="false" :model-id="id" view-type="list" type-code="ACCESS082" />
          </QupListItem>
          <QupListItem label="商家手持身份证" :span="24">
            <c-file-list :uploadable="false" :editable="false" :model-id="id" view-type="list" type-code="ACCESS083" />
          </QupListItem>
          <QupListItem label="自愿放弃说明书模板下载" :span="24">
            <div class="template-down" @click.stop="handleDownTemplate(ACCESS082.id)">
              <span>（零售）经销商自愿放弃经营权说明书模板</span>
              <i class="el-icon-download" />
            </div>
          </QupListItem>
          <QupListItem label="自愿放弃说明书模板下载" :span="24">
            <div class="template-down" @click.stop="handleDownTemplate(ACCESS084.id)">
              <span>（零售）经销商自愿放弃经营权说明书签订指导</span>
              <i class="el-icon-download" />
            </div>
          </QupListItem>
        </template>
        <template v-if="cooperationEndDTO.type === 'C'">
          <QupListItem label="交接证明" :span="24">
            <c-file-list :uploadable="false" :editable="false" :model-id="id" view-type="list" type-code="ACCESS085" />
          </QupListItem>
          <QupListItem label="关系证明" :span="24">
            <c-file-list :uploadable="false" :editable="false" :model-id="id" view-type="list" type-code="ACCESS086" />
          </QupListItem>
          <QupListItem label="商家交接证明模板下载" :span="24">
            <div class="template-down" @click.stop="handleDownTemplate(ACCESS085.id)">
              <span>（零售）经销商交接证明模板</span>
              <i class="el-icon-download" />
            </div>
          </QupListItem>
          <QupListItem label="交接双方现场签订照片" label-width="160px" :span="24">
            <c-file-list :uploadable="false" :editable="false" :model-id="id" view-type="list" type-code="ACCESS111" />
          </QupListItem>
          <QupListItem label="交接双方现场签订照片模板下载" label-width="190px" :span="24">
            <div class="template-down" @click.stop="handleDownTemplate(ACCESS111.id)">
              <span>交接双方现场签订照片模板下载</span>
              <i class="el-icon-download" />
            </div>
          </QupListItem>
        </template>
      </QupList>
    </c-title>
    <c-title title="BPM审核信息">
      <QupList :column="3" sep="：" default-value="" label-position="right" label-width="140">
        <QupListItem label="变更进度" :value="detail.schedule" dict-type-code="CTM_CUS_ARCHIVE_CHANGE_PROGRESS" :prop-enum="{domainCode:'marketing',appCode:'slm'}" />
        <QupListItem :value="detail.createTime" label="申请时间" />
        <QupListItem :value="detail.applyNo" label="BPM单号" />
        <!-- <QupListItem label="档案科审核结果" :value="detail.fileReviewResult" dict-type-code="REVIEW_RESULT" :prop-enum="{domainCode:'marketing',appCode:'slm'}" /> -->
        <!-- <QupListItem :value="detail.fileReviewTime" label="档案科审核时间" /> -->
        <!-- <QupListItem :value="detail.fileReviewAdvice" label="档案科审核意见" :span="24" /> -->
        <!-- <QupListItem :value="detail.authorityReviewTime" label="系统权限处理审核时间" /> -->
        <!-- <QupListItem :value="detail.authorityReviewAdvice" label="系统权限处理审核意见" :span="24" /> -->
      </QupList>
      <Options :data="detail.opinionDTOS" />
    </c-title>

    <div class="btn-center">
      <c-button type="primary" @click="handleGoBack">返回</c-button>
    </div>
  </c-back-wrap>
</template>
<script>
import { detail as getDetail } from '@/api/channelTask2/termination'
import ShopTable from './ShopTable'
import AccountAndSenderInfo from '../../components/AccountAndSenderInfo'
import ShopConstructionInfo from '../../components/ShopConstructionInfo'
import Options from '../../components/Options'
import { getTemplateConfig, downTemplate } from '@/api/channelTask2/change'

export default {
  name: 'Detail',
  components: {
    ShopTable,
    AccountAndSenderInfo,
    ShopConstructionInfo,
    Options
  },
  props: {
    id: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      detail: {},
      loading: false,
      changeTableData: [],
      changeResultTableData: [],
      // 配置
      ACCESS082: {},
      ACCESS084: {},
      ACCESS085: {},
      ACCESS111: {}
    }
  },
  computed: {
    shopBusinessDTOS() {
      return this.detail.shopBusinessDTOS || []
    },
    accountToDTOS() {
      return this.detail.accountToDTOS || []
    },
    shopConstructDTOS() {
      return this.detail.shopConstructDTOS || []
    },
    cooperationEndDTO() {
      return this.detail.cooperationEndDTO || {}
    },
    decorateEnterpriseDTO() {
      return this.detail.decorateEnterpriseDTO || {}
    }
  },
  created() {
    this.getDetailData()
    this.templateConfig()
  },
  methods: {
    getDetailData() {
      this.loading = true
      return getDetail(this.id).then(res => {
        this.detail = res.data
      }).finally(() => {
        this.loading = false
      })
    },
    handleGoBack() {
      this.$pageStack.pop()
    },
    handleDownTemplate(id) {
      downTemplate(id)
    },
    templateConfig() {
      getTemplateConfig('ACCESS082').then(res => {
        this.ACCESS082 = res
      })
      getTemplateConfig('ACCESS084').then(res => {
        this.ACCESS084 = res
      })
      getTemplateConfig('ACCESS085').then(res => {
        this.ACCESS085 = res
      })
      getTemplateConfig('ACCESS111').then(res => {
        this.ACCESS111 = res
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.template-down{
    // display: flex;
    // align-content: center;
    display: inline-block;
    cursor: pointer;
    &>*{
      margin-right: 10px;
      color: #333;
      font-weight: 600;
    }
  }
</style>
